<template>
  <ul class="nav">
    <li>
      <nuxt-link to="/" class="active">首页</nuxt-link>
    </li>
    <li v-for="(item, index) in navList" :key="index">
      <nuxt-link :to="'/class/' + item.id + '/0'">{{ item.name }}</nuxt-link>
    </li>
    <li style="width:60px">
      <nuxt-link to="/classmenu"
        >更多&nbsp;<i class="el-icon-arrow-down"
      /></nuxt-link>
    </li>
  </ul>
</template>

<script>
import _ from 'lodash'
export default {
  data() {
    return {
      active: 0
    }
  },
  computed: {
    allClass() {
      return this.$store.state.classification.allClass
    },
    userClass() {
      return this.$store.state.classification.userClass
    },
    navList() {
      if (_.isEmpty(this.userClass)) {
        return this.allClass.slice(0, 5)
      }
      if (this.userClass.length < 5) {
        return this.userClass.concat(
          this.allClass
            .filter((item) => {
              let f = true
              _.forEach(this.userClass, function(value, key) {
                if (value.id === item.id) {
                  f = false
                  return f
                }
              })
              return f
            })
            .slice(0, 5 - this.userClass.length)
        )
      } else {
        return this.userClass.slice(0, 5)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
  li {
    margin-right: 30px;
    height: 100%;
    width: 40px;
    .active {
      color: $--color-primary;
    }
    a {
      display: block;
      height: 100%;
      width: 100%;
      font-size: 16px;
      line-height: 65px;
      color: #ffffff;
      text-decoration: none;
      &:hover {
        color: $--color-primary;
      }
    }
  }
}
</style>
